<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title>0. DEMO</title>
    <link rel="stylesheet" href="./index.css">
  </head>
  <body>
    <div class="explain">
      All evetensions are enabled
    </div>
    <div class="code-html">
      <script src="./highlight.pack.js" ></script>
      <script src="./index.js" ></script>
      <script src="./flowchart.min.js" ></script>
      <script src="./ext.flow.js" ></script>
    <div id="editSection"></div>
    <script class="code-js">
      var content = [
        '| @cols=2:merged |',
        '| --- | --- |',
        '| table | table |',
        '```uml',
        'partition Conductor {',
        '  (*) --> "Climbs on Platform"',
        '  --> === S1 ===',
        '  --> Bows',
        '}',
        '',
        'partition Audience #LightSkyBlue {',
        '  === S1 === --> Applauds',
        '}',
        '',
        'partition Conductor {',
        '  Bows --> === S2 ===',
        '  --> WavesArmes',
        '  Applauds --> === S2 ===',
        '}',
        '',
        'partition Orchestra #CCCCEE {',
        '  WavesArmes --> Introduction',
        '  --> "Play music"',
        '}',
        '```',
        '```chart',
        ',category1,category2',
        'Jan,21,23',
        'Feb,31,17',
        '',
        'type: column',
        'title: Monthly Revenue',
        'x.title: Amount',
        'y.title: Month',
        'y.min: 1',
        'y.max: 40',
        'y.suffix: $',
        '```',
        '```flow',
        'st=>start: Start|past:>http://www.google.com[blank]',
        'e=>end: End:>http://www.google.com',
        'op1=>operation: My Operation|past',
        'op2=>operation: Stuff|current',
        'sub1=>subroutine: My Subroutine|invalid',
        'cond=>condition: Yes',
        'or No?|approved:>http://www.google.com',
        'c2=>condition: Good idea|rejected',
        'io=>inputoutput: catch something...|request',
        'para=>parallel: parallel tasks',

        'st->op1(right)->cond',
        'cond(yes, right)->c2',
        'cond(no)->para',
        'c2(true)->io->e',
        'c2(false)->e',

        'para(path1, bottom)->sub1(left)->op1',
        'para(path2, right)->op2->e',

        'st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})',
        '```'
      ].join('\n');

      var editor = new tui.Editor({
        el: document.querySelector('#editSection'),
        previewStyle: 'vertical',
        height: '400px',
        initialEditType: 'markdown',
        useCommandShortcut: true,
        initialValue: content,
        exts: [
          {
            name: 'chart',
            minWidth: 100,
            maxWidth: 600,
            minHeight: 100,
            maxHeight: 300
          },
          'scrollSync',
          'colorSyntax',
          'uml',
          'mark',
          'table',
          'flow',
        ]
      });
    </script>
  </body>
</html>
